

<template>
  <div class="detail">
    <div class="tablesB" v-if="dialogTitle == '入库详情'">
      <el-table :data="into_storeShow.drug_item" border>
        <el-table-column type="index" width="70" label="序号">
        </el-table-column>
        <template v-for="(item, index) in $baseBai['enterManage']['detail']">
          <el-table-column
            :width="item.width"
            v-if="item.prop == 'store_infoName'"
            :prop="item.prop"
            :label="item.label"
            :key="index"
          >
            <template >
              <div>{{ into_storeShow.store_info.name }}</div>
            </template>
          </el-table-column>
          <el-table-column
            v-else
            :width="item.width"
            :prop="item.prop"
            :label="item.label"
            :key="index + item"
          >
          </el-table-column>
        </template>
      </el-table>
    </div>
    <div
      class="tablesB"
      v-if="dialogTitle == '入库新增' || dialogTitle == '入库修改'"
    >
      <div class="selects">
        <div v-if="dialogTitle == '入库修改'">
          <div>申请单号：</div>
          <div>
            <el-input v-model="into_storeShow.number" :disabled="true">
            </el-input>
          </div>
        </div>

        <div>
          <div><span on_b>*</span> 入库库房:</div>
          <div>
            <el-select v-model="into_storeShow.store_id" placeholder="请选择入库库房">
              <el-option
                v-for="item in KuFangList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>
           <div>
          <div><span on_b>*</span> 入库类型:</div>
          <div>
            <el-select v-model="into_storeShow.type" placeholder="请选择入库类型">
              <el-option
                v-for="item in $baseBai['enterManage']['type']"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>
         <div>
          <div>入库凭证:</div>
          <div>
            <el-input v-model="into_storeShow.into_proof" placeholder="请输入入库凭证">
            </el-input>
          </div>
        </div>
        
        <div>
          <div><span on_b>*</span> 供货单位:</div>
          <div>
            <el-input v-model="into_storeShow.supply_org" placeholder="请输入供货单位">
            </el-input>
          </div>
        </div>
        <div>
          <div>税务登记号:</div>
          <div>
            <el-input v-model="into_storeShow.tax_number" placeholder="请输入税务登记号">
            </el-input>
          </div>
        </div>
        <div>
          <div>供货人员:</div>
          <div>
            <!-- <dialogTableUser :that="this"  funName="storage/set_into_storeShow" typeName="supply_user"></dialogTableUser> -->
             <el-input v-model="into_storeShow.supply_user" placeholder="请输入供货人员"></el-input>
          </div>
        </div>
          <div>
          <div>结算方式:</div>
          <div>
            <el-select v-model="into_storeShow.payment" placeholder="请选择结算方式">
              <el-option
                v-for="item in $baseBai['enterManage']['payment']"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>
         
        <!-- <div>
          <div>折扣金额:</div>
          <div>
            <el-input type='number'  v-model="into_storeShow.amount" placeholder="请输入折扣金额">
            </el-input>
          </div>
        </div> -->
         <div>
          <div><span on_b>*</span> 采购人员:</div>
          <div>
            <dialogTableUser :that="this"   funName="storage/set_into_storeShow" Ptext="请选择采购人员" :setVal="setVal" typeName="apply_user"></dialogTableUser>
          
          </div>
        </div>
        <div>
          <div>验收人员:</div>
          <div>
            <dialogTableUser :that="this"  funName="storage/set_into_storeShow" Ptext="请选择验收人员"  :setVal="setVal"  typeName="accept_user"></dialogTableUser>
          
          </div>
        </div>
          <div>
          <div>发票类型:</div>
          <div>
            <el-select v-model="into_storeShow.invoice_type" placeholder="请选择发票类型">
              <el-option
                v-for="item in $baseBai['enterManage']['invoice_type']"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div >
              <div>发票日期:</div>
          <el-date-picker
           value-format="yyyy-MM-dd"
            v-model="into_storeShow.invoice_time"
             type="date"
            start-placeholder="请选择发票日期"
            
          >
          </el-date-picker>
        </div>
     
       <div>
          <div> 发票号码</div>
          <div>
            <el-input v-model="into_storeShow.invoice_number" placeholder="请输入发票号码">
            </el-input>
          </div>
        </div>
        <div>
          <div>发票编码</div>
          <div>
            <el-input v-model="into_storeShow.invoice_code" placeholder="请输入发票编码">
            </el-input>
          </div>
        </div>
        <div>
          <div>备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注:&nbsp;&nbsp;</div>
          <div>
            <el-input v-model="into_storeShow.remark" placeholder="请输入备注">
            </el-input>
          </div>
        </div>
      </div>
      <div class="selectTables">
        <div style="margin-right: 10px;width:100px">选择卫材:</div>
        <el-popover placement="bottom-end" width="500px" trigger="focus">
          <el-input
            placeholder="请选择卫材"
            slot="reference"
            v-model="selectParams.keyword"
            @input="getDrugItem()"
          >
            <i slot="suffix" class="el-input__icon el-icon-search"></i>
          </el-input>

          <el-table
            v-loading="threeSelectLoading"
            height="300"
            @current-change="xuanzeDataThree"
            highlight-current-row
            :data="selectData2"
            style="width: 100%"
          >
            <el-table-column type="index" width="70" label="序号">
            </el-table-column>
            <el-table-column label="卫材" prop="name" width="150">
            </el-table-column>
             <el-table-column
                    label="规格"
                    prop="specification"
                    
                  >
                  </el-table-column>
             <el-table-column
                    label="单位"
                    prop="base_unit"
                  
                  >
                  </el-table-column>
                 
                    <el-table-column
                    label="国药准字"
                    prop="drug_code"
                    
                  >
                  </el-table-column>
                  
          </el-table>
          <el-pagination
            :current-page="selectParams.page"
            :page-size="selectParams.limit"
            @current-change="handlePagination"
            :total="selectParams.pageCount"
            layout="prev, pager, next"
          >
          </el-pagination>
        </el-popover>
      </div>
      <div>
        <el-table :data="tableData2" style="width: 100%">
          <template
            v-for="(item, index) in $baseBai['enterManage']['updateList']"
          >
            <el-table-column
              v-if="item.prop == 'num'"
              :width="item.width"
              :prop="item.prop"
              :label="item.label"
              :key="index"
            >
              <template slot-scope="scope">
                <span>
                  <el-input-number
                    v-model="scope.row.num"
                    controls-position="right"
                    :min="0"
                   
                  ></el-input-number>
                </span>
              </template>
            </el-table-column>
             <el-table-column
              :width="item.width"
              v-else-if="item.prop == 'fill_no'"
              :prop="item.prop"
              :label="item.label"
              :key="index"
            >
              <template slot-scope="scope">
                <span>
                  <span>
                    <el-input
                      v-model="scope.row.fill_no"
                      placeholder="请输入批号"
                    ></el-input>
                  </span>
                </span>
              </template>
            </el-table-column>
             <el-table-column
              :width="item.width"
              v-else-if="item.prop == 'useful_time'"
              :prop="item.prop"
              :label="item.label"
              :key="index"
            >
              <template slot-scope="scope">
              
                     <el-date-picker
                      value-format="yyyy-MM-dd"
                        v-model="scope.row.useful_time"
                        type="date"
                        start-placeholder="有效期"
                        
                      >
                      </el-date-picker>
                  
              </template>
            </el-table-column>

             <el-table-column
              :width="item.width"
              v-else-if="item.prop == 'create_time'"
              :prop="item.prop"
              :label="item.label"
              :key="index"
            >
              <template slot-scope="scope">
              
                     <el-date-picker
                      value-format="yyyy-MM-dd"
                        v-model="scope.row.create_time"
                        type="date"
                        start-placeholder="有效期"
                        
                      >
                      </el-date-picker>
                  
              </template>
            </el-table-column>
              <el-table-column
              :width="item.width"
              v-else-if="item.prop == 'buy_price'"
              :prop="item.prop"
              :label="item.label"
              :key="index"
            >
              <template slot-scope="scope">
                <span>
                  <span>
                    <el-input
                    type="number"
                      v-model="scope.row.buy_price"
                      placeholder="进价"
                    ></el-input>
                  </span>
                </span>
              </template>
            </el-table-column>

              <el-table-column
              :width="item.width"
              v-else-if="item.prop == 'into_fill'"
              :prop="item.prop"
              :label="item.label"
              :key="index"
            >
              <template slot-scope="scope">
                <span>
                  <span>
                    <el-input
                      v-model="scope.row.into_fill"
                      placeholder="入库批次"
                    ></el-input>
                  </span>
                </span>
              </template>
            </el-table-column>
            
              <el-table-column
              :width="item.width"
              v-else-if="item.prop == 'store_address'"
              :prop="item.prop"
              :label="item.label"
              :key="index"
            >
              <template slot-scope="scope">
                <span>
                  <span>
                    <el-input
                      v-model="scope.row.store_address"
                      placeholder="存放位置"
                    ></el-input>
                  </span>
                </span>
              </template>
            </el-table-column>
            
   <el-table-column
                  v-else-if="item.prop == 'price'"
                  :width="item.width"
                  
                  :prop="item.prop"
                  :label="item.label"
                  :key="index"
                >
                  <template slot-scope="scope">
                    <span>
                     
                       <el-input-number v-model="scope.row.price" controls-position="right"  :min="0"></el-input-number>
                    </span>
                  </template>
                </el-table-column>
            <el-table-column
              :width="item.width"
              v-else-if="item.prop == 'remark'"
              :prop="item.prop"
              :label="item.label"
              :key="index"
            >
              <template slot-scope="scope">
                <span>
                  <span>
                    <el-input
                      v-model="scope.row.remark"
                      placeholder="备注"
                    ></el-input>
                  </span>
                </span>
              </template>
            </el-table-column>


            

            <el-table-column
              :width="item.width"
              v-else
              :prop="item.prop"
              :label="item.label"
              :key="index"
            >
            </el-table-column>
          </template>

          <el-table-column fixed="right" label="操作" width="120">
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="deleteRow(scope.$index, tableData2)"
                type="text"
                size="small"
              >
                移除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="buts">
        <div>
          <el-button type="info" @click="thatF.Detail_Show = false"
            >取消</el-button
          >
        </div>
        <div><el-button class="butB_Add" @click="save" >保存</el-button></div>
      </div>
    </div>
  </div>
</template>
<script>
let t;
import dialogTableUser from '../../components/dialogTableUser'
import { mapState, mapActions } from "vuex";
import {drugIndex,intoSave} from "@/api/weicai"

export default {
  data() {
    return {

      
      setVal: {
        apply_user: "apply_user_info",
        accept_user: "accept_user_info",
      },
      params: {
        number: "",
        remark: "",
        arrival_date: "",
      },
      selectParams: {
        keyword: "",
        page: 1,
        limit: 15,
        pageCount: 0,
      },
    
        selectData2: [],
    
      tableData2: [],
      threeSelectLoading: false,
    };
  },
    components: {
   dialogTableUser
  },
 
  mounted(){
    this.getDrugItem();
       if (this.dialogTitle == "入库修改") {
          this.tableData2=this.into_storeShow.material_item.map(v=>{
        return {
          ...v,
          price:v.buy_price
        }
      })
       }
  },
  props: ["dialogTitle", "thatF"],
  methods: {
    save() {
    
          console.log("this.tableData2",this.tableData2)

      let d = {
        store_id: this.into_storeShow.store_id,//库房
        type:this.into_storeShow.type?parseInt(this.into_storeShow.type):'',//类型
       
        into_proof:this.into_storeShow.into_proof,//入库凭证
        tax_number:this.into_storeShow.tax_number,//供货单位
        supply_org:this.into_storeShow.supply_org,//税务号
        supply_user:this.into_storeShow.supply_user,//供货人员
        payment:this.into_storeShow.payment,    //结算方式
       // amount:this.into_storeShow.amount,//金额
        apply_user:this.into_storeShow.apply_user,//采购人员
        accept_user:this.into_storeShow.accept_user,//验收人员
        invoice_type:this.into_storeShow.invoice_type,//发票类型
        invoice_time:this.into_storeShow.invoice_time,//发票日期
        invoice_number:this.into_storeShow.invoice_number,
        invoice_code:this.into_storeShow.invoice_code,
         remark: this.into_storeShow.remark,  //备注
         material_items:this.tableData2.map((v) => {
          return {
            material_id: v.id,
            num: v.num,
            fill_no: v.fill_no,//批号
            useful_time:v.useful_time,//有效期
             buy_price:v.price,//单价
            create_time:v.create_time,  //生产日期
           into_fill:v.into_fill,   //入库批次
           remark: v.remark,      
            store_address:v.store_address,  //存放位置
            
             
          };
        })
      }

    for( var key in d ){
        if(!d[key]){
              if(key=='store_id'){
                 return this.$message.error('请选择入库库房')
              }else if(key=='type'){
                return this.$message.error('请选择入库类型')
              }else if(key=='supply_org'){
                return this.$message.error('请填写供货单位')
              }else if(key=='apply_user'){
                return this.$message.error('请选择采购人员')
              }
            
        }
    }


    if(d.material_items.length===0){
      return this.$message.error('请选择卫材')
    }
      console.log( d.material_items)
    //  for (const v of d.material_items) {
          
    //         for( var key in v){
    //           if(key!='into_fill'&&key!='remark'&&key!='store_address')
    //             if(!v[key]){
    //               return this.$message.error('卫材里您还有未选择的选项')
    //             }
    //         }
    //  }



    
      // return
    
      if (this.dialogTitle == "入库修改") {
        d.id = this.into_storeShow.id;
      }

      intoSave(d).then((res) => {
        if (res.code == 200) {
          this.thatF.Detail_Show = false;
          this.$message({
            message: res.message,
            type: "success",
          });
          setTimeout(() => {
            this.thatF.params.page = 1;
            this.thatF.getList();
          }, 500);
        }
      });
      
    },
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    handlePagination(e) {
      this.threeSelectLoading = true;
      this.selectParams.page = e;

      this.getDrugItem();
    },
    xuanzeDataThree(item) {
      if (this.tableData2.findIndex((res) => res.id == item.id) === -1) {
        this.tableData2 = this.tableData2.concat(item);
      }
    },
    getDrugItem() {
      let d = {
        keyword: this.selectParams.keyword,
        page: this.selectParams.page,
        limit: this.selectParams.limit,
       
      };

      drugIndex(d).then((res) => {
        if (res.code == 200) {
          this.selectData2 = res.data.list.map((v) => {
            return {
              ...v,
              num:0,
              price:v.price,
              fill_no: "",
              useful_time:'',
              create_time:'',
              into_fill:'',
              store_address:'',
              remark:'',
            };
          });




          this.selectParams.pageCount = res.data.count;
          this.threeSelectLoading = false;
        }
      });
    },
  },
  computed: {
    // ...mapState({
    //   into_storeShow: (state) => state.storage.into_storeShow,
    //   KuFangList: (state) => state.dictBai.KuFangList,
    // }),
  },
};
</script>
<style lang='scss' scoped>
.addUdetailpdate {
  padding: 0 5%;
}
/deep/ .el-dialog__body {
  height: 70vh;
  overflow: scroll;
}
/deep/ .selects {
  display: flex;
  flex-wrap: wrap;
  margin-left: 20px;
  > div > div:nth-child(1) {
    text-align: justify;
    width: 100px;
   
    margin-right: 10px;
  }
  > div {
    margin-top: 20px;
    width: 32%;
    display: flex;
    align-items: center;
  }
  input{
    width: 200px;
  }
}
.selectTables {
  margin-top: 20px;
  margin-bottom: 30px;
  display: flex;
  align-items: center;
}
.buts {
  display: flex;
  margin-top: 50px;
  justify-content: center;
  > div {
    margin-right: 20px;
  }
}

.selects{
 
  >div>div:nth-child(1){
      position: relative;
     
    [on_b]{
      position: absolute;
      left: -10px;
    }
      
  }
    
  
 
}
</style>